/* 初始化样式
------------------------------- */
:root {
  --mxg-color-white: #fff;
  --mxg-color-black: rgb(32 44 58 / 32%);
  --mxg-color-primary: #1966ff;
  --mxg-border-color: #f1f2f3;
  --mxg-color-hover: #3c3c3c;
  --mxg-checked-bg-color: #3e6289;
  --mxg-color-hover-rgba: rgba(0, 0, 0, 0.05);
  --mxg-color-text-shadow: hsl(240, 51%, 60%);
  --mxg-left-memu-bg-color: rgb(48, 65, 86);
  --main-warp-padding: 14px;

  
  // 左侧菜单
  --mxg-bg-menuMainColor: var(--mxg-left-memu-bg-color) !important;
  --mxg-bg-menuActiveColor: var(--mxg-color-black) !important;
  --mxg-bg-menuHoverColor: var(--mxg-color-black) !important;
  --mxg-text-menuMainColor: var(--mxg-color-black) !important;
  --mxg-text-menuActiveColor: var(--mxg-color-white) !important;
  --mxg-text-menuHoverColor: var(--mxg-color-white) !important;
  // 头部导航
  --mxg-bg-headerBarColor: var(--mxg-color-white) !important;
  // 头部右侧图标光标浮动
  --mxg-color-user-hover: var(--mxg-color-hover-rgba) !important;
  // 边框
  --mxg-border-color-light: var(--mxg-border-color) !important;
  --tenant-tree-margin: var(--main-warp-padding);

}

* {
  margin: 0;
  padding: 0;
  // padding 和 border 的值算在指定宽高内部的
  box-sizing: border-box;
  // 如 Dropdown 下拉菜单，隐藏点击会出现蓝色边框 */
  outline: none !important;
}

html,
body,
#app {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: Inter, -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu,
    Microsoft YaHei, "Droid Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-size: 14px;
  box-sizing: border-box;
}

.w100 {
  width: 100% !important;
}

.h100 {
  height: 100% !important;
  overflow: hidden;
}

.pointer {
  cursor: pointer;
}

/* 线条
------------------------------- */
.border {
  border: 1px solid red;
}
.border-dashed {
  border: 1px dashed #eee;
}

/* flex 弹性布局
------------------------------- */
.flex {
  display: flex;
}

.flex-column {
  @extend .flex;
  flex-direction: column;
}

.flex-center {
  @extend .flex;
  align-items: center;
  justify-content: center;
}

.flex-row-center {
  display: flex;
  justify-content: center;
}

.flex-column-center {
  @extend .flex-column;
  align-items: center;
  justify-content: center;
}

.space-between {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.space-between-column {
  @extend .flex-column;
  justify-content: space-between;
}

/* border-radius全局样式
------------------------------- */
@for $i from 1 through 15 {
  .bradio#{$i} {
    border-radius: #{$i}px !important;
  }
}

/* 宽度全局样式
------------------------------- */
@for $i from 50 through 500 {
  .w#{$i} {
    width: #{$i}px !important;
  }
}
/* 高度全局样式
------------------------------- */
@for $i from 101 through 500 {
  .h#{$i} {
    height: #{$i}px !important;
  }
}

/* 外边距、内边距全局样式
------------------------------- */
@for $i from 1 through 35 {
  .fs#{$i} {
    font-size: #{$i}px !important;
  }
  .mt#{$i} {
    margin-top: #{$i}px !important;
  }
  .mr#{$i} {
    margin-right: #{$i}px !important;
  }
  .mb#{$i} {
    margin-bottom: #{$i}px !important;
  }
  .ml#{$i} {
    margin-left: #{$i}px !important;
  }
  .mg#{$i} {
    margin: #{$i}px !important;
  }
  .pt#{$i} {
    padding-top: #{$i}px !important;
  }
  .pr#{$i} {
    padding-right: #{$i}px !important;
  }
  .pb#{$i} {
    padding-bottom: #{$i}px !important;
  }
  .pl#{$i} {
    padding-left: #{$i}px !important;
  }
  .pd#{$i} {
    padding: #{$i}px !important;
  }
}

/* 主布局样式
------------------------------- */
.layout-padding {
  border: 1px solid white;
  overflow: hidden;
  margin: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.layout-container {
  width: 100%;
  height: 100%;
  // 菜单展开时
  .layout-aside-menu-200 {
    width: 250px !important;
    transition: width 0.3s ease;
  }

  // 菜单收起时
  .layout-aside-menu-60 {
    width: 60px !important;
    transition: width 0.3s ease;
  }

  // 左侧菜单
  .layout-aside {
    background: var(--mxg-bg-menuMainColor);
    height: inherit;
    color: white;
    z-index: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-x: hidden !important;
    border-right: 1px solid var(--mxg-border-color-light);
    //顶部logo
    .layout-logo {
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--el-color-primary);
      font-size: 16px;
      cursor: pointer;
      .layout-logo-img {
        width: 26px;
      }
      span {
        text-shadow: var(--mxg-color-text-shadow) 3px 2px 3px;
        color: white !important;
        display: inline-block;
        white-space: nowrap;
        margin-left: 5px;
        font-size: 16px;
        font-weight: bold;
      }
    }

    /* NavMenu 导航菜单------------------------------- */
    // 收缩后，鼠标放在多级菜单浮出窗口
    .el-menu--vertical {
      background: var(--mxg-bg-menuMainColor);
    }
    .el-menu-item {
      color: white;
    }
    .el-menu {
      border-right: none !important;
      &.el-menu--collapse {
        // 展开菜单时平滑
        transition: width 0.3ms ease;
      }
      background-color: transparent !important;
    }

    .cla-menu  .el-menu-item:hover {
      background: var(--mxg-bg-menuHoverColor) !important;
    }

    .el-sub-menu__title:hover {
      background-color: var(--mxg-bg-menuHoverColor);
    }
    .el-menu .el-menu-item.is-active {
      color: white;
      background: #1890ff !important;
    }
    .el-sub-menu__title {
      color: white;
    }
 


  }

  // 收缩后，一级菜单浮出窗口 el-popper
  .el-popper.is-dark {
    color: var(--el-text-color-primary);
    background: var(--mxg-bg-menuMainColor);
    border: 1px solid var(--mxg-border-color);
    .el-popper__arrow:before {
      // 箭头
      background: var(--mxg-bg-menuMainColor) !important;
      border: 1px solid var(--mxg-border-color); //var(--next-border-color);
    }
  }

  // 右侧头部
  .layout-header {
    padding: 0 !important;
    height: auto !important;

    .layout-header-index {
      height: 50px;
      display: flex;
      align-items: center;
      color: var(--el-text-color-regular) !important;
      background: var(--mxg-bg-headerBarColor);
      border-bottom: 1px solid var(--mxg-border-color-light) !important;
      box-shadow: 0px 0px 4px #eee;
      .layout-header-breadcrumb {
        display: flex;
        align-items: center;
        flex: 1;
        height: inherit;

        .el-breadcrumb__inner a {
          // 面包屑标题不加粗
          font-weight: normal;
        }

        .layout-header-expand-icon {
          font-size: 19px;
          margin: 0 10px;
          cursor: pointer;
        }
      }

      .layout-header-user {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-right: 15px;

        .user-dropdown-link {
          height: inherit;
          display: flex;
          align-items: center;
          white-space: nowrap;
        }

        .layout-header-user-icon {
          cursor: pointer;
          padding: 0 10px;
          height: 50px;
          line-height: 50px;
          display: flex;
          align-items: center;

          &:hover {
            background: var(--mxg-color-user-hover);
          }
        }
      }
    }
  }

  // 右侧主区域
  .layout-main {
    overflow: hidden;
    height: calc( 100% - 50px );
    background-color: #f5f5f5;
    padding: 10px ;
    .layout-main-warp {
      border-radius: 2px;
      padding: 0 var(--main-warp-padding) 0 var(--main-warp-padding);
      height: 100%;
      background-color: white;
      overflow: auto;
    }
  }
}
